<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>SQL操作</title>
    	<link rel="stylesheet" type="text/css" href="/mobile/plugin/westvalley/common/plugin/iview/iview.css">
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/vue/vue.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/iview/iview.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/jQuery/jquery.min.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/jQuery/jquery.cookie.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/tools/sql/js/init.js"></script>
	    <style type="text/css">
	    	.ivu-table-body{
	    		height: 260px !important;
	    	}
	    </style>
	</head>
	<body>
		<div id="app">
			<Row>
				<i-col span="24">
					<Tabs>
				        <Tab-Pane name="executeSql" label="查询SQL">
				        	<Row>
				    			<i-col span="24">
				    				<i-form :model="executeForm" :label-width="80">
				    					<Form-Item label="数据源">
				    						<i-select v-model="executeForm.dbSource">
				    							<i-option value="default">default</i-option>
				    						</i-select>
				    					</Form-Item>
				    					<Form-Item label="SQL">
				    						<i-input v-model="executeForm.executeSql" type="textarea" :rows="5" placeholder="请填写SQL"></i-input>
				    					</Form-Item>
				    				</i-form>
				    			</i-col>
				    		</Row>
				    		<Row>
				    		 	<i-col span="24">
				    		 		<div style="height: 3px"></div>
				    		 	</i-col>
				    		</Row>
				    		<Row>
				    			<i-col span="12">
				    		 		<div style="text-align:center;">
				    		 			<i-button type="primary" @click="executionSqlClick">
				    		 				<Icon type="search"></Icon>
				    		 				<span>执行语句</span>
				    		 			</i-button>
				    		 		</div>
				    		 	</i-col>
				    		 	<i-col span="12">
				    		 		<div style="text-align:center;">
					    		 		<i-button type="ghost" @click="executionResetClick">
					    		 			<Icon type="refresh"></Icon>
					    		 			<span>重置语句</span>
					    		 		</i-button>
				    		 		</div>
				    		 	</i-col>
				    		</Row>
				        </Tab-Pane>
				        <Tab-Pane name="executeHistoryData" label="历史记录">
				        	<Row>
				        		<i-col span="24" >
				        			<i-table border highlight-row :columns="historyColums" :data="historyData" height="234"></i-table>
				        		</i-col>
				        	</Row>
				        </Tab-Pane>
				    </Tabs>
				</i-col>
			</Row>
    		<Row>
    		 	<i-col span="24">
    		 		<div style="height: 10px"></div>
    		 	</i-col>
    		</Row>
    		<Row>
    		 	<i-col span="24">
    		 		<Tabs :value="executeForm.tabPage">
				        <Tab-Pane name="resultInfo" label="结果">
				        	<span>{{executeForm.msgText}}</span>
				        </Tab-Pane>
				        <Tab-Pane name="tablePage" label="数据" :disabled="executeForm.isTable">
				        	<i-table border highlight-row :columns="queryColumns" :data="queryData" height="300"></i-table>
				        	<div style="margin: 10px;overflow: hidden">
					        	<div style="float: right;">
									<Page :total="totalNum" :current="currentPage" @on-change="changePage"></Page>
								</div>
							</div>
				        </Tab-Pane>
				    </Tabs>
    		 	</i-col>
    		</Row>
		</div>
	</body>
</html>